<template>
	<view class="container">
		<view class="search-section">
			<view class="search-bar">
				<input type="text" v-model="searchKey" placeholder="搜索资源" />
				<button @click="search">搜索</button>
			</view>
			<view class="filter-tags">
				<text 
					v-for="(tag, index) in tags" 
					:key="index"
					:class="{'active': selectedTags.includes(tag)}"
					@click="toggleTag(tag)"
				>{{tag}}</text>
			</view>
		</view>
		
		<view class="section resource-section">
			<view class="section-header">
				<view class="section-title">推荐资源</view>
				<view class="sort-select">
					<picker :range="sortOptions" @change="handleSortChange">
						<text>{{currentSort}}</text>
					</picker>
				</view>
			</view>
			
			<view class="resource-list">
				<view class="resource-item" v-for="(resource, index) in resources" :key="index">
					<view class="resource-icon">
						<image :src="getResourceIcon(resource.type)" mode="aspectFit"></image>
					</view>
					<view class="resource-info">
						<text class="title">{{resource.title}}</text>
						<text class="desc">{{resource.description}}</text>
						<view class="meta">
							<text>{{resource.author}} · {{resource.updateTime}}</text>
							<text>下载 {{resource.downloads}}</text>
						</view>
					</view>
					<view class="resource-actions">
						<button @click="previewResource(resource)">预览</button>
						<button @click="downloadResource(resource)">下载</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="section collab-section">
			<view class="section-title">协作空间</view>
			<view class="collab-list">
				<view class="collab-item" v-for="(project, index) in collabProjects" :key="index">
					<view class="project-info">
						<text class="title">{{project.title}}</text>
						<text class="members">{{project.members}} 位成员</text>
					</view>
					<view class="project-progress">
						<progress :percent="project.progress" stroke-width="4"></progress>
						<text>{{project.progress}}%</text>
					</view>
					<button @click="enterProject(project)">进入项目</button>
				</view>
			</view>
			<button class="create-btn" @click="createProject">创建协作项目</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKey: '',
			tags: ['文档', 'PPT', '视频', '习题', '实验', '案例'],
			selectedTags: [],
			sortOptions: ['最新', '最热', '推荐'],
			currentSort: '推荐',
			resources: [
				{
					title: '高等数学教学课件（上）',
					description: '包含微积分、极限等重要知识点的详细讲解',
					type: 'ppt',
					author: '张教授',
					updateTime: '2024-03-15',
					downloads: 256
				},
				{
					title: '大学物理实验指导',
					description: '详细的物理实验操作步骤和注意事项',
					type: 'doc',
					author: '李教授',
					updateTime: '2024-03-14',
					downloads: 189
				}
			],
			collabProjects: [
				{
					title: '2024春季教材编写',
					members: 8,
					progress: 75
				},
				{
					title: '实验教学改革方案',
					members: 5,
					progress: 30
				}
			]
		}
	},
	methods: {
		search() {
			// TODO: 调用百度智能搜索API
			uni.showLoading({
				title: '搜索中...'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		toggleTag(tag) {
			const index = this.selectedTags.indexOf(tag)
			if (index > -1) {
				this.selectedTags.splice(index, 1)
			} else {
				this.selectedTags.push(tag)
			}
		},
		handleSortChange(e) {
			this.currentSort = this.sortOptions[e.detail.value]
			// TODO: 调用排序API
		},
		getResourceIcon(type) {
			const icons = {
				doc: '/static/icons/doc.png',
				ppt: '/static/icons/ppt.png',
				video: '/static/icons/video.png',
				pdf: '/static/icons/pdf.png'
			}
			return icons[type] || '/static/icons/file.png'
		},
		previewResource(resource) {
			// TODO: 调用预览API
			uni.navigateTo({
				url: `/pages/teaching/preview?id=${resource.id}`
			})
		},
		downloadResource(resource) {
			// TODO: 调用下载API
			uni.showLoading({
				title: '下载中...'
			})
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '下载成功',
					icon: 'success'
				})
			}, 1500)
		},
		enterProject(project) {
			uni.navigateTo({
				url: `/pages/teaching/collab?id=${project.id}`
			})
		},
		createProject() {
			uni.navigateTo({
				url: '/pages/teaching/collab/create'
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	
	.search-section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		
		.search-bar {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			input {
				flex: 1;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 40rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
			}
			
			button {
				width: 160rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #007AFF;
				color: #FFFFFF;
				border-radius: 40rpx;
				font-size: 28rpx;
			}
		}
		
		.filter-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin-top: 20rpx;
			
			text {
				padding: 10rpx 30rpx;
				background: #F5F5F5;
				border-radius: 30rpx;
				font-size: 26rpx;
				color: #666;
				
				&.active {
					background: #007AFF;
					color: #FFFFFF;
				}
			}
		}
	}
	
	.section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		
		.resource-list {
			.resource-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1rpx solid #F5F5F5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.resource-icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.resource-info {
					flex: 1;
					margin-right: 20rpx;
					
					.title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.desc {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.meta {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.resource-actions {
					display: flex;
					gap: 10rpx;
					
					button {
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 30rpx;
						
						&:first-child {
							background: #f5f5f5;
							color: #666;
						}
						
						&:last-child {
							background: #007AFF;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	
	.collab-section {
		.collab-list {
			.collab-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #F5F5F5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.project-info {
					flex: 1;
					margin-right: 20rpx;
					
					.title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.members {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.project-progress {
					width: 200rpx;
					margin-right: 20rpx;
					
					progress {
						margin-bottom: 10rpx;
					}
					
					text {
						font-size: 24rpx;
						color: #666;
					}
				}
				
				button {
					font-size: 24rpx;
					padding: 10rpx 30rpx;
					background: #007AFF;
					color: #FFFFFF;
					border-radius: 30rpx;
				}
			}
		}
		
		.create-btn {
			margin-top: 30rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #007AFF;
			color: #FFFFFF;
			border-radius: 40rpx;
			font-size: 28rpx;
		}
	}
}
</style> 